<template>
  <view class="message-main">
    <view class="list" :class="{ hideList: hideList }">
      <view class="item fxj-start" :class="{ on: showRadio }">
        <view class="hide-left fx-center">
          <radio
            @click="list[0].isChecked = !list[0].isChecked"
            value="r1"
            :checked="list[0].isChecked"
          />
        </view>
        <view class="show-right fx-center">
          <view class="left fx-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="svg-icon"
              viewBox="0 0 32 32"
              width="18"
              height="18"
              style="fill: rgb(255, 255, 255);"
            >
              <path
                d="M21.446 17.929l5.464-5.304-7.536-1.107-3.375-6.821-3.375 6.821-7.536 1.107 5.464 5.304-1.304 7.518 6.75-3.554 6.732 3.554zM30.857 11.554q0 0.393-0.464 0.857l-6.482 6.321 1.536 8.929q0.018 0.125 0.018 0.357 0 0.893-0.732 0.893-0.339 0-0.714-0.214l-8.018-4.214-8.018 4.214q-0.393 0.214-0.714 0.214-0.375 0-0.563-0.259t-0.188-0.634q0-0.107 0.036-0.357l1.536-8.929-6.5-6.321q-0.446-0.482-0.446-0.857 0-0.661 1-0.821l8.964-1.304 4.018-8.125q0.339-0.732 0.875-0.732t0.875 0.732l4.018 8.125 8.964 1.304q1 0.161 1 0.821z"
              ></path>
            </svg>
          </view>
          <view class="right flex">
            <view class="r-top fxc-between">
              <view class="name">精选活动</view>
              <view class="time">2018.04.08</view>
            </view>
            <view class="r-bottom"
              >#妈妈不用做超人#考拉神助攻，独家揭秘辣妈</view
            >
          </view>
        </view>
      </view>
      <view class="item fxj-start" :class="{ on: showRadio }">
        <view class="hide-left fx-center">
          <radio
            @click="list[0].isChecked = !list[0].isChecked"
            value="r1"
            :checked="list[0].isChecked"
          />
        </view>
        <view class="show-right fx-center">
          <view class="left fx-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="svg-icon"
              viewBox="0 0 24 24"
              width="18"
              height="18"
              style="fill: rgb(255, 255, 255);"
            >
              <path
                d="M12 1a9 9 0 0 0-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h4v1h-7v2h6c1.66 0 3-1.34 3-3V10a9 9 0 0 0-9-9z"
              ></path>
            </svg>
          </view>
          <view class="right flex">
            <view class="r-top fxc-between">
              <view class="name">客服助手</view>
              <view class="time">2018.04.08</view>
            </view>
            <view class="r-bottom"
              >#妈妈不用做超人#考拉神助攻，独家揭秘辣妈</view
            >
          </view>
        </view>
      </view>
      <view class="item fxj-start" :class="{ on: showRadio }">
        <view class="hide-left fx-center">
          <radio
            @click="list[0].isChecked = !list[0].isChecked"
            value="r1"
            :checked="list[0].isChecked"
          />
        </view>
        <view class="show-right fx-center">
          <view class="left fx-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="svg-icon"
              viewBox="0 0 24 24"
              width="18"
              height="18"
              style="fill: rgb(255, 255, 255);"
            >
              <path
                d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"
              ></path>
            </svg>
          </view>
          <view class="right flex">
            <view class="r-top fxc-between">
              <view class="name">通知消息</view>
              <view class="time">2018.04.08</view>
            </view>
            <view class="r-bottom"
              >#妈妈不用做超人#考拉神助攻，独家揭秘辣妈</view
            >
          </view>
        </view>
      </view>
      <view class="item fxj-start" :class="{ on: showRadio }">
        <view class="hide-left fx-center">
          <radio
            @click="list[0].isChecked = !list[0].isChecked"
            value="r1"
            :checked="list[0].isChecked"
          />
        </view>
        <view class="show-right fx-center">
          <view class="left fx-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="svg-icon"
              viewBox="0 0 32 32"
              width="18"
              height="18"
              style="fill: rgb(255, 255, 255);"
            >
              <path
                d="M22.857 12.571q0-0.464-0.339-0.804t-0.804-0.339q-3.071 0-5.679 0.884t-4.634 2.393-4.205 3.92q-0.339 0.375-0.339 0.804 0 0.464 0.339 0.804t0.804 0.339q0.429 0 0.804-0.339 0.482-0.429 1.321-1.268t1.196-1.179q2.446-2.214 4.795-3.143t5.598-0.929q0.464 0 0.804-0.339t0.339-0.804zM32 9.036q0 1.696-0.357 3.446-0.821 4-3.295 6.839t-6.384 4.786q-3.821 1.929-7.821 1.929-2.643 0-5.107-0.839-0.268-0.089-1.571-0.75t-1.714-0.661q-0.286 0-0.705 0.571t-0.804 1.25-0.938 1.25-1.071 0.571q-0.768 0-1.134-0.313t-0.813-1.063q-0.036-0.071-0.107-0.196t-0.098-0.179-0.054-0.17-0.027-0.241q0-0.625 0.554-1.313t1.214-1.17 1.214-1 0.554-0.857q0-0.071-0.25-0.679t-0.286-0.786q-0.161-0.911-0.161-1.857 0-2.054 0.777-3.929t2.125-3.295 3.045-2.482 3.643-1.705q0.982-0.321 2.589-0.455t3.205-0.161 3.188-0.107 2.92-0.429 2.027-1.009l0.527-0.527 0.527-0.5 0.482-0.357 0.652-0.286 0.777-0.080q0.696 0 1.259 0.821t0.848 2 0.429 2.214 0.143 1.714z"
              ></path>
            </svg>
          </view>
          <view class="right flex">
            <view class="r-top fxc-between">
              <view class="name">种草社区</view>
              <view class="time">2018.04.08</view>
            </view>
            <view class="r-bottom">你收到了新的通知</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="showRadio" class="bottom-button fx">
      <view class="left fx-center flex" @click="del">删除</view>
      <view class="right fx-center flex" @click="showRadio = false">取消</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          isChecked: false,
        },
      ],
      showRadio: false,
      hideList: false,
    };
  },
  components: {},
  mounted() {},
  methods: {
    del() {
      this.hideList = true;
      this.showRadio = false;
    },
  },
  onNavigationBarButtonTap(e) {
    this.showRadio = !this.showRadio;
  },
};
</script>

<style lang="less" scope>
@import "@/static/less/flex.less";
.message-main {
  overflow: hidden;

  .list {
    background: #fff;
    &.hideList {
      display: none;
    }
  }

  .item {
    position: relative;
    border-bottom: 2upx solid #eee;
    color: #333;
    transform: translate3d(0upx, 0upx, 0upx);
    transition: ease 300ms;

    &.on {
      transform: translate3d(140upx, 0upx, 0upx);
    }

    .hide-left {
      position: absolute;
      height: 100%;
      left: -140upx;
      top: 0;
      width: 140upx;
      background: #f7f7f7;
    }

    &:nth-child(1) {
      .left {
        background: rgb(232, 49, 93);
      }
    }
    &:nth-child(2) {
      .left {
        background: rgb(121, 148, 231);
      }
    }

    &:nth-child(3) {
      .left {
        background: rgb(141, 186, 230);
      }
    }

    &:nth-child(4) {
      .left {
        background: rgb(149, 198, 135);
      }
    }

    .show-right {
      padding: 30upx 20upx;
      background: #fff;
    }
    /deep/.uni-radio-wrapper {
      right: 40upx;
    }
    /deep/.uni-radio-input {
      width: 60upx;
      height: 60upx;

      &.uni-radio-input-checked {
        background-color: rgb(122, 184, 251) !important;
        border-color: rgb(122, 184, 251) !important;

        &::before {
          font-size: 40upx;
        }
      }
    }

    .left {
      margin-right: 36upx;
      width: 70upx;
      height: 70upx;
      background: rgb(121, 148, 231);
      border-radius: 50%;

      svg {
        width: 36upx;
        height: 36upx;
      }
    }

    .name {
      font-size: 30upx;
    }

    .time {
      font-size: 24upx;
      color: #999;
    }

    .r-bottom {
      margin-top: 20upx;
      font-size: 26upx;
    }
  }

  .bottom-button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100upx;
    display: flex;
    font-size: 40upx;
    color: #fff;

    .left {
      background: #4998ef;
    }
    .right {
      background: #ff5f5f;
    }
  }
}
</style>
